<template>
  <el-dialog
    title="标签用户明细"
    :visible.sync="visible"
    width="80%"
    append-to-body
  >
    <avue-crud
      ref="crud"
      v-model="form"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      @search-change="searchChange"
      @search-reset="searchReset"
    ></avue-crud>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import crudMixins from '@/mixins/crud';
import { fetchLabelUserList } from '@/api/app/labelMng';
import { CUSTOMER_TYPE_LIST } from '@/const/type';
export default {
  name: 'LabelUser',
  mixins: [crudMixins],
  props: {
    nodeId: {
      type: [Object, String],
    },
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {},
      loading: false,
      tableOption: {
        ...window.$crudMixins.tableOptions,
        emptyBtn: false,
        submitBtn: false,
        addBtn: false,
        menu: false,
        labelWidth: 110,
        column: [
          {
            label: '用户昵称',
            prop: 'nickname',
          },
          {
            label: '手机号',
            prop: 'phone',
          },
          {
            label: '注册时间',
            prop: 'registerTime',
            type: 'datetime',
            width: 160,
            format: 'yyyy-MM-dd',
            valueFormat: 'yyyy-MM-dd',
          },
          {
            type: 'select',
            label: '性别',
            prop: 'sex',
            dicUrl: '/admin/dict/type/sex',
          },
          {
            label: '生日',
            prop: 'birth',
            width: 120,
          },
          {
            label: '当前城市',
            prop: 'district',
            overHidden: true,
            width: 180,
          },
          {
            label: '类型',
            prop: 'type',
            type: 'select',
            dicData: CUSTOMER_TYPE_LIST,
          },
          {
            label: '状态',
            prop: 'lockFlag',
            type: 'select',
            dicData: [
              {
                label: '有效',
                value: '0',
              },
              {
                label: '锁定',
                value: '9',
              },
            ],
          },
        ],
      },
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
    ...mapGetters(['userInfo', 'access_token']),
  },
  watch: {
    visible(val) {
      if (val) {
        this.getList();
      }
    },
  },
  methods: {
    // 列表查询
    getList(page, refresh) {
      debugger;
      if (refresh) {
        this.page.current = 1;
        this.page.currentPage = 1;
      }
      this.tableLoading = true;
      fetchLabelUserList(
        Object.assign(
          {
            current: this.page.currentPage,
            size: this.page.pageSize,
            id: this.nodeId,
          },
          this.searchForm
        )
      )
        .then((response) => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>
